* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%; /* 设置高度为100% */
}

/* 自定义黑暗模式特性 */
body.dark-mode {
    --dark-mode-header-bg: #424242;
    --dark-mode-header-border: #fff;
    --dark-mode-text-color: #9e9e9e;
    --dark-mode-body-bg: #848484;
    --dark-mode-body-color: #fff;
    --dark-mode-toggle-bg: #2E2E2E; 
    --dark-mode-circle-color: #fff;
    --dark-mode-toggle-translatex: 28px;
}

.background {
    width: 100%; /* 设置宽度为100% */
    height: 100%; /* 设置高度为100% */
    display: flex;

    .background-left {
        width: 18%;
        height: 100%;

        .background-left-top {
            width: 100%;
            height: 10%;
            background-color: #606266;
            /* background: linear-gradient(90deg, #008D75, #6EC3B3, #A3D6CA, #C4E4DA); */
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 30px;
            color: white;
            letter-spacing: 1px;
            font-weight: 200;
            font-family: 华文行楷;
            position: relative;
            z-index: 0;
            
            
            /* 移动端样式 */
            @media (max-width: 768px) {
            font-size: 15px; /* 减小字体大小 */
            letter-spacing: 0.5px; /* 调整字母间距 */
            }
        }
        
        .background-left-top::before {
            content: '后台管理';
            position: absolute;
            color: #000;
            transform: translate(-10px,5px) scaleY(0.5) skew(50deg);
            z-index: -1;

            /* 移动端样式 */
            @media (max-width: 768px) {
                transform: translate(-7px,1px) scaleY(0.7) skew(50deg);
            }
        }

        .background-middle {
            width: 100%;
            height: 8%;
            background-color: #2E2E2E;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            /* border: 1px solid #c4c4c4; */
            position: relative;
            
            i {
                font-size: 30px;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                border: 1px solid #c4c4c4;
                display: flex;
                justify-content: center;
                align-items: center;
                position: absolute;
                display: none;
                
                /* 移动端样式 */
                @media (max-width: 768px) {
                    width: 30px;
                    height: 30px;
                    font-size: 20px;
                    text-align: center;
                    display: block;
                }
            }
            
            /* PC端样式 */
            @media (min-width: 769px) {
                #icon-show,
                #icon-hide {
                    display: none;
                }
            }
            
        }
        
        .background-left-bottom {
            width: 100%;
            height: 82%;
            background-color: #2E2E2E;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            /* background: linear-gradient(125deg, #73A9AD, #90C8AC, #C4DFAA, #F5F0BB); */
            
            
            
            .background-left-bottom-ul {
                width: 100%;
                list-style: none;
                /* padding-top: 50px; */
                color: #BDBDBD;
                transition: opacity 0.5s ease-in-out; /* 添加过渡效果 */
                cursor: pointer;
                
                li {
                    width: 100%;
                    height: 50px;
                    line-height: 50px;
                    font-family: 华文行楷;
                    font-size: 17px;
                    /* border: 1px solid #c4c4c4; */
                    border-left: 3px solid #BDBDBD;
                    border-bottom: 3px solid #BDBDBD;
                    display: flex;
                    padding-left: 30px;
                    transition: transform 0.2s ease, background-color 0.2s ease; /* 添加过渡效果 */
                    margin-top: 15px;
                    
                    /* 移动端样式 */
                    @media (max-width: 768px) {
                        height: 30px;
                        line-height: 30px;
                        font-size: 9px;
                        padding-left: 5px;
                        margin-top: 10px;
                    }
                }
                
                li:hover {
                    /* background-color: #f0f0f0; */
                    transform: translateY(-5px);
                }

                i {
                    font-size: 15px;
                    margin-right: 5px;
                    
                    /* 移动端样式 */
                    @media (max-width: 768px) {
                        font-size: 10px;
                        margin-right: 3px;
                    }
                }
                
                @media (max-width: 768px) {
                    display: none;
                }
                }
            }
        }
    }
    
    .background-right {
        width: 82%;
        height: 100%;
        /* background-color: aqua; */

        .background-right-top {
            width: 100%;
            height: 10.1%;
            background-color: var(--dark-mode-body-bg, #eee);
            color: var(--dark-mode-body-color);
            border-bottom: 1px solid #c4c4c4;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            padding-right: 40px;
            flex-wrap: wrap;
            position: relative;

            .switch {
                display: flex;
                align-items: center;
                margin-left: auto; /* 右对齐 */
                margin-right: 10px;
                gap: 5px; /* 两个元素之间的间隔 */
        
                span {
                    font-size: 20px;
                }
        
                .toggle {
                    border: 1px solid #c4c4c4;
                    background-color: var(--dark-mode-toggle-bg,);
                    height: 100%;
                    width: 55px;
                    padding: 5px;
                    border-radius: 100px;
                    cursor: pointer;
                }
        
                .circle {
                    width: 17px;
                    height: 17px;
                    border-radius: 100px;
                    background-color: var(--dark-mode-circle-color, black);
                    transform: translateX(var(--dark-mode-toggle-translatex, 0));
                    /* transform: translateX(0); */
                    transition: transform 0.3s ease;
                    pointer-events: none; /* 鼠标无法点击 */
                }

                /* .toggle:hover .circle {
                    transform: translateX(28px);
                } */
            }

            .background-right-top-span {
                width: 150px;
                height: 30px;
                border: 1px solid #c4c4c4;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 5px;

                @media (max-width: 768px) {
                    width: 130px;
                    height: 25px;
                    font-size: 12px;
                }

                .yonhu {
                    font-size: 20px;

                    @media (max-width: 768px) {
                        font-size: 15px;
                    }
                }

                .xiangxia {
                    width: 20px;
                    height: 20px;
                    border: 1px solid #c4c4c4;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-left: 5px;
                    border-radius: 50%;
                    transition: transform 0.2s ease, background-color 0.2s ease;

                    @media (max-width: 768px) {
                        width: 15px;
                        height: 15px;
                        font-size: 12px;
                        margin-left: 2px;
                    }
                }

                .xiangxia:hover {
                    background-color: white;
                    cursor: pointer;
                    transform: scale(1.1);
                }
            }

            .background-right-top-ul {
                position: absolute;
                list-style: none;
                width: 100px;
                /* height: 120PX;
                background-color: aqua; */
                display: none;
                margin: 130px 0 0 0;
                text-align: center;
                z-index: 4;

                @media (max-width:768px) {
                    width: 70px;
                    font-size: 10px;
                    margin: 100px 0 0 0;
                }

                li {
                    width: 100%;
                    height: 30px;
                    line-height: 30px;
                    border: 1px solid #c4c4c4;
                    margin-top: 3px;
                    border-radius: 5px;

                    @media (max-width: 768px) {
                        height: 20px;
                        line-height: 20px;
                    }



                    i {
                        padding-right: 2px;

                        @media (max-width: 768px) {
                            font-size: 12px;
                        }
                    }
                }

                li:hover {
                    cursor: pointer;
                    background-color: #f0f0f0;
                    transform: translateY(-1px);
                }
            }
        }


        .background-right-boottom {
            width: 100%;
            height: 89.9%;
            background-color: var(--dark-mode-body-bg, #fff);
            /* color: var(--dark-mode-body-color); */
            /* display: flex; */
            
            .background-right-boottom-top {
                width: 100%;
                height: 11.9%;
                /* background-color: #eee; */
                display: flex;
                justify-content: space-between;
                align-items: center;

                @media (max-width: 768px) {
                    height: 8%;
                }

                .boottom-left {
                    width: 23%;
                    height: 100%;
                    /* background-color: #000; */
                    display: flex;
                    flex-wrap: wrap;

                    .boottom-left-span1 {
                        width: 100%;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        /* border: 1px solid #c4c4c4; */
                        margin-top: 10px;
                        font-size: 30px;
                        font-weight: bold;
                        font-family: 华文行楷;

                        @media (max-width: 768px) {
                            height: 25px;
                            line-height: 25px;
                            font-size: 15px;
                            margin-top: 0;
                        }
                    }
                    .boottom-left-span2 {
                        width: 100%;
                        height: 30px;
                        text-align: center;
                        /* border: 1px solid #c4c4c4; */

                        @media (max-width: 768px) {
                            height: 20px;
                            font-size: 10px;
                        }
                    }
                }

                .boottom-right {
                    width: 15%;
                    height: 40%;
                    border: 1px solid #c4c4c4;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 20px;
                    border-radius: 20px;
                    cursor: pointer;
                    background-color: #eee;

                    @media (max-width: 768px) {
                        width: 37%;
                        height: 47%;
                    }
                }
                .boottom-right:hover {
                    background-color: #F2F2F2;
                }
            }

            .background-right-boottom-boottom {
                width: 100%;
                height: 78%;
                /* border: 1px solid #c4c4c4; */
                /* visibility: hidden; */
                position: relative;
                

                table {
                    width: 90%; /* 表格宽度占满容器 */
                    border-collapse: collapse; /* 去掉单元格间距 */
                    margin: 30px auto; /* 居中 */
                    /* display: none; */

                    @media (max-width: 768px) {
                        width: 100%;
                    }
                }
                th, td {
                    border: 1px solid #ccc; /* 添加边框 */
                    padding: 10px; /* 内边距 */
                    text-align: left; /* 左对齐 */

                    @media (max-width: 768px) {
                        padding: 5px;
                        font-size: 12px;
                    }
                }

                th {
                    background-color: #f2f2f2; /* 标题背景色 */

                    @media (max-width: 768px) {
                        font-size: 14px;
                    }
                }
                /* 设置不同列的宽度 */
                th:nth-child(1), td:nth-child(1) { width: 5%; } /* ID */
                th:nth-child(2), td:nth-child(2) { width: 8%; } /* 用户名 */
                th:nth-child(3), td:nth-child(3) { width: 10%; } /* 邮箱 */
                th:nth-child(4), td:nth-child(4) { width: 7%; } /* 角色 */
                th:nth-child(5), td:nth-child(5) { width: 5%; } /* 状态 */
                th:nth-child(6), td:nth-child(6) { width: 7%; cursor: pointer; } /* 操作 */

                @media (max-width:768px) {
                    th:nth-child(3),td:nth-child(3) { display: none; } /* 隐藏邮箱 */
                    th:nth-child(4),td:nth-child(4) { display: none; } /* 隐藏角色 */

                    /* 调整其他列的宽度 */
                    th:nth-child(1),td:nth-child(1) { width: 10%; }
                    th:nth-child(2),td:nth-child(2) { width: 30%; }
                    th:nth-child(5),td:nth-child(5) { width: 25%; }
                    th:nth-child(6),td:nth-child(6) { width: 30%; }
                }

                .boottom-xintian {
                    width: 70%;
                    height: 430px;
                    background-color: #FAFAFA;
                    position: absolute;
                    top: 40%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 3;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */;
                    border-radius: 10px;

                    @media (max-width: 768px) {
                        width: 90%;
                        height: 370px;
                    }

                    .boottom-xintian-ul {
                        width: 100%;
                        height: 100%;
                        list-style: none;

                        h4 {
                            text-align: center;
                            font-weight: 900;
                        }
                        
                        li {
                            width: 85%;
                            height: 50px;
                            margin: 15px auto;

                            @media (max-width: 768px) {
                                margin: 5px auto;
                            }

                            p {
                                margin-bottom: 0;
                            }

                            input {
                                width: 100%;
                                height: 28px;

                                @media (max-width: 768px) {
                                    height: 20px;
                                }
                            }

                            button {
                                width: 45px;
                            }
                        }

                    }
                }
            }
        }

        .background-right-boottom-wenzhangguanli {
            width: 100%;
            height: 89.9%;
            background-color: var(--dark-mode-body-bg, #fff);
            /* background-color: aquamarine; */
            /* display: flex; */
            
            .background-right-boottom-wenzhangguanli-top {
                width: 100%;
                height: 11.9%;
                /* background-color: #eee; */
                display: flex;
                justify-content: space-between;
                align-items: center;

                @media (max-width: 768px) {
                    height: 8%;
                }

                .boottom-left {
                    width: 23%;
                    height: 100%;
                    /* background-color: #000; */
                    display: flex;
                    flex-wrap: wrap;

                    .boottom-left-span1 {
                        width: 100%;
                        height: 40px;
                        line-height: 40px;
                        text-align: center;
                        /* border: 1px solid #c4c4c4; */
                        margin-top: 10px;
                        font-size: 30px;
                        font-weight: bold;
                        font-family: 华文行楷;

                        @media (max-width: 768px) {
                            height: 25px;
                            line-height: 25px;
                            font-size: 15px;
                            margin-top: 0;
                        }
                    }
                    .boottom-left-span2 {
                        width: 100%;
                        height: 30px;
                        text-align: center;
                        /* border: 1px solid #c4c4c4; */

                        @media (max-width: 768px) {
                            height: 20px;
                            font-size: 10px;
                        }
                    }
                }

                .wenzhangguanli-boottom-right {
                    width: 15%;
                    height: 40%;
                    border: 1px solid #c4c4c4;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 20px;
                    border-radius: 20px;
                    cursor: pointer;
                    background-color: #eee;

                    @media (max-width: 768px) {
                        width: 37%;
                        height: 47%;
                    }
                }
                .wenzhangguanli-boottom-right:hover {
                    background-color: #F2F2F2;
                }
            }
            .wenzhangguanli-boottom-boottom {
                width: 100%;
                height: 78%;
                /* border: 1px solid #c4c4c4; */
                /* visibility: hidden; */
                position: relative;
                

                table {
                    width: 90%; /* 表格宽度占满容器 */
                    border-collapse: collapse; /* 去掉单元格间距 */
                    margin: 30px auto; /* 居中 */
                    /* display: none; */

                    @media (max-width: 768px) {
                        width: 100%;
                    }
                }
                th, td {
                    border: 1px solid #ccc; /* 添加边框 */
                    padding: 10px; /* 内边距 */
                    text-align: left; /* 左对齐 */

                    @media (max-width: 768px) {
                        padding: 5px;
                        font-size: 12px;
                    }
                }
                th {
                    background-color: #f2f2f2; /* 标题背景色 */

                    @media (max-width: 768px) {
                        font-size: 14px;
                    }
                }
                /* 设置不同列的宽度 */
                th:nth-child(1), td:nth-child(1) { width: 3%; } /* ID */
                th:nth-child(2), td:nth-child(2) { width: 12%; } /* 标题 */
                th:nth-child(3), td:nth-child(3) { width: 10%; } /* 发布时间 */
                th:nth-child(4), td:nth-child(4) { width: 5%; } /* 作者 */
                th:nth-child(5), td:nth-child(5) { width: 5%; cursor: pointer; } /* 操作 */

                @media (max-width:768px) {
                    th:nth-child(3),td:nth-child(3) { display: none; } /* 隐藏发布时间 */
                    
                    /* 调整其他列的宽度 */
                    th:nth-child(1),td:nth-child(1) { width: 3%; }
                    th:nth-child(2),td:nth-child(2) { width: 12%; }
                    th:nth-child(4),td:nth-child(4) { width: 5%; }
                    th:nth-child(5),td:nth-child(5) { width: 5%; }
                }

                .wenzhangguanli-xintian {
                    width: 70%;
                    height: 430px;
                    background-color: #FAFAFA;
                    position: absolute;
                    top: 40%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    z-index: 3;
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 添加阴影效果 */;
                    border-radius: 10px;

                    @media (max-width: 768px) {
                        width: 90%;
                        height: 370px;
                    }

                    .wenzhangguanli-xintian-ul {
                        width: 100%;
                        height: 100%;
                        list-style: none;

                        h4 {
                            text-align: center;
                            font-weight: 900;
                        }
                        
                        li {
                            width: 85%;
                            height: 50px;
                            margin: 15px auto;

                            @media (max-width: 768px) {
                                margin: 5px auto;
                            }

                            p {
                                margin-bottom: 0;
                            }

                            input {
                                width: 100%;
                                height: 28px;

                                @media (max-width: 768px) {
                                    height: 20px;
                                }
                            }

                            .category {
                                width: 25%;

                                @media (max-width: 768px) {
                                    width: 65%;
                                }
                            }

                            button {
                                width: 45px;
                            }
                        }

                    }
                }
            }
        }

        .background-right-boottom-guanlirenzheng {
            width: 100%;
            height: 89.9%;
            display: flex;
            align-items: center;
            background-color: #eee;
            justify-content: space-between;
            /* background: linear-gradient(90deg, #008D75, #6EC3B3, #A3D6CA, #C4E4DA); */


            .guanlirenzheng-top {
                width: 35%;
                height: 40%;
                margin-left: 20px;
                /* background-color: #f2f2f2; */

                .guanlirenzheng-top-top {
                    width: 100%;
                    height: 45%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    /* background-color: #424242; */

                    .guanlirenzheng-img {
                        width: 100px;
                        height: 100px;
                        border-radius: 50%;
                        /* background-color: aqua; */

                        img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    span {
                        color: #333;
                        font-size: 60px;
                        /* font-weight: bold; */
                        font-family: 华文行楷;
                    }
                }

                .guanlirenzheng-top-bottom {
                    width: 100%;
                    height: 60%;
                    /* display: flex;
                    justify-content: center;
                    align-items: center; */
                    /* background-color: #424242; */
                    padding-top: 10px;

                    .guanlirenzheng-top-jieshao {
                        width: 100%;
                        height: 55%;
                        background-color: #eee;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 20px;
                        font-family: 华文行楷;
                        background: rgba(255, 255, 255, 0.6); /* 半透明背景 */
                        box-sizing: 3px 3px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
                        backdrop-filter: blur(50px); /* 模糊效果 */
                        border-radius: 10px; /* 根据需要调整圆角 */
                    }

                    .guanlirenzheng-top-ul {
                        list-style: none;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        gap: 20px;
                        margin-top: 10px;
                        
                        .iconfont {
                            font-size: 20px;
                        }
                    }
                }
            }

            .guanlirenzheng-bottom {
                width: 55%;
                height: 65%;
                /* background-color: #000; */
                border: 1px solid #c4c4c4;
                margin-right: 20px;
            }
        }

        /* 添加动画效果 */
        .background-right-boottom,
        .background-right-boottom-wenzhangguanli {
            transition: all 0.5s ease;
        }

        /* 动画效果 */
        .background-right-boottom.hide {
            transform: translateX(100%);
        }

        .background-right-boottom-wenzhangguanli.show {
            transform: translateX(0);
        }
    }

